<template>
  <div class="home">
    <div class="home_header">
      <mt-header>
        <span slot="left"
          ><span style="color: #00deba">京医</span>挂号<span
            style="position: relative; top: -9px; color: #00deba"
            >+</span
          ></span
        >
      </mt-header>
      <mt-field
        readonly
        placeholder="搜索医院、科室"
        @click.native="goto('/select')"
        ><img src="@/assets/images/home/search.png"
      /></mt-field>
    </div>
    <div class="home_imgs">
      <img src="@/assets/images/home/homeTitle.png" />
    </div>
    <div class="home_title">
      <div>特色服务</div>
      <div @click="goto('/section')">全部科室</div>
    </div>
    <div class="home_office">
      <ul>
        <li
          v-for="{ ks, bz, img, ksid } in familys"
          :key="ksid"
          @click="$router.push(`/selectClass?${ks}` + '')"
        >
          <span>{{ ks }}</span>
          <span v-html="bz"></span>
          <div>
            <img :src="require(`@/assets/images/home/${img}`)" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <div class="home_title">
      <div>名医科普</div>
      <div @click="goto('/video')">全部视频</div>
    </div>
    <div class="home_video">
      <ul ref="ul">
        <li
          v-for="{ img, title, vdid } in videos"
          :key="vdid"
          @click.prevent="goto(`/call/${vdid}`)"
        >
          <div>
            <img :src="img" />
          </div>
          <span>{{ title }}</span>
        </li>
      </ul>
    </div>
    <div class="home_title">
      <div>健康知识</div>
      <div @click="goto('/health')">全部知识</div>
    </div>
    <public-list
      v-for="(v, i) in articles"
      :key="i"
      :items="v"
      @click.native="gotos(v.lid)"
    ></public-list>
    <!--  v-if="!articles.length==0" 如果没有请求数据是页面占不了一平,infinite-scrool-distance会自动加载 -->
    <div
      infinite-scroll-distance="30"
      v-infinite-scroll="loadMore"
      v-if="!articles.length == 0"
    >
      <div class="information" v-if="infor">{{ loadText }}</div>
    </div>
  </div>
</template>

<script>
import PublicList from "@/components/PublicList.vue";
export default {
  components: { PublicList },
  data() {
    return {
      infor: false,
      loadText: "正在加载...",
      MyLoadMore: false,
      familys: [],
      videos: [],
      articles: [],
      time: () => {},
    };
  },
  methods: {
    gotos(value){
        this.$router.push(`/articledetail?lid=${value}`)
        this.articles.forEach(v=>{
            if(v.lid==value){
            v.pageviews++
            }
        })
    },
    goto(value) {
      this.$router.push(value);
    },
    getData(url, arr, callback) {
      // 降速测试跳转页面是否请求
      if (arr.length == 0) {
        // 调用方法执行加载
        this.$indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle",
        });
      }
      this.axios.get(url).then((res) => {
        callback(res.data.data);
        // 如果有数据清空加载
        if (res) {
          this.$indicator.close();
        }
      });
    },
    loadMore() {
      if (!this.MyLoadMore) return;
      this.infor = true;
      this.loadText = "没有更多数据";
    },
  },
  mounted() {
    this.getData("/details?page=1", this.articles, (data) => {
      this.articles = data;
    });
    this.getData("/video?page=1", this.videos, (data) => {
      this.videos = data;
      if (data) {
        this.time = setTimeout(() => {
          this.$refs.ul.style.width = `${50 * this.$refs.ul.children.length}vw`;
        }, 500);
      }
    });
    this.getData("/users/index_tese", this.familys, (data) => {
      this.familys = data;
    });
  },
  activated() {
    this.MyLoadMore = true;
  },
  deactivated() {
    this.MyLoadMore = false;
    clearTimeout(this.time);
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/homeview.scss";
</style>